<template>
    <div>
     <h3>{{ title }}</h3>
     <div style="width: 95%;" id="select1">
        <select name="" id="">  <option value="">{{ sel1 }}</option>
        
        </select>
        <select name="" id="">  <option value="">问题性质</option>
        
    </select>
    <select name="" id="">  <option value="">问题类别</option>
        
    </select>
    <select name="" id="">  <option value="">所属市区</option>
        
    </select>
    <select name="" id="">  <option value="">处理单位</option>
        
    </select>
    <select name="" id="">  <option value="">时限</option>
        
    </select>
    
  <div class="demo-date-picker" style="display: inline-block;border: 1px solid black;border-radius: 4px;">
    <div class="block">
      <el-date-picker
        v-model="value1"
        type="date"
        placeholder="年/月/日"
        :size="size"
        style="width: 130px;height: 25px;"
      />
    </div>
    
  </div>
  <span>至</span>
  <div class="demo-date-picker"  style="display: inline-block;border: 1px solid black;border-radius: 4px;">
    <div class="block">
      <el-date-picker
        v-model="value2"
        type="date"
        placeholder="年/月/日"
        :size="size"
        style="width: 130px;height: 25px;"
      />
    </div>
    
  </div>
    </div>
    <div style="margin-top: 20px;" id="select2">
        <div id="left">
        <input type="text" style=" width: 300px; height: 28px;"><div style="width: 80px;height: 32px;border: 0px;background-color: #169bd5;color: white;line-height: 28px;text-align: center;display: inline-block;">搜索</div>
    </div>
    <div id="right">
        <select name="" id="" style="width: 130px;">  <option value="" >自定义列表</option>
        
    </select>
    <div style="width: 130px;height: 28px;background-color: #169bd5;display: inline-block;margin-left: 50px;color: white;text-align: center;line-height: 28px;">导出数据</div>
</div>
    </div>
    </div>
</template>

<script lang="ts">
import { ref } from 'vue'

    export default {
        name:'selectbeforethired',
        data() {
            return {
                
            }
        },
        props:['title',"sel1"],
        setup() {
            const size = ref<'default'>('default')

const value1 = ref('')
const value2 = ref('')

const shortcuts = [
  {
    text: 'Today',
    value: new Date(),
  },
  {
    text: 'Yesterday',
    value: () => {
      const date = new Date()
      date.setTime(date.getTime() - 3600 * 1000 * 24)
      return date
    },
  },
  {
    text: 'A week ago',
    value: () => {
      const date = new Date()
      date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
      return date
    },
  },
]

const disabledDate = (time: Date) => {
  return time.getTime() > Date.now()
};
return {
    disabledDate,
    size,
    shortcuts,
    value2,
    value1,
   
}
        }
        // props: ["title"]
    }
</script>

<style  scoped>
 select{
    width: 120px;
    height: 28px;
  
 }
 #select1{
    display: flex;
    justify-content: space-between;
 }
 #select2{
    width: 95%;
    display: flex;
    justify-content: space-between;
 }
</style>